<template>
  <div class="lookDetails">
    <el-dialog title="活动详情" :visible.sync="isShow" center :before-close="close" class='lookDetails-dialog'>
      <div class='btns tc mt10 mb10'>
        <el-button v-if='$store.state.user.role_id == 1' @click.stop="editAction(form)" v-no-more-click:3000 type="warning">修改活动</el-button>
        <el-button v-if="form.status == 3 && $store.state.user.role_id == 1" @click.stop="review(form)" type="warning" >审核</el-button>
      </div>
      <el-form :model="form" label-width="200px" >
        <template v-if="form.key == 'consumer_pay_vip'">
          <el-row type="flex" >
            <el-col :span="12">
              <el-form-item label="活动名称：">{{ form.name }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="起始时间：">{{ condition.start_time | formatTimeDate }}</el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" >
            <el-col :span="12">
              <el-form-item label="结束时间：">{{ condition.end_time | formatTimeDate }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- <el-form-item label="过期时间：">{{ condition.expire_time }}</el-form-item> -->
              <el-form-item></el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" >
            <el-col :span="12">
              <el-form-item label="铜牌VIP价格：">{{ condition.vip1 }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银牌VIP价格：">{{ condition.vip2 }}</el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" >
            <el-col :span="12">
              <el-form-item label="金牌VIP价格：">{{ condition.vip3 }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="钻石VIP价格：">{{ condition.vip4 }}</el-form-item>
            </el-col>
          </el-row>
        </template>

        <template v-else-if="form.key == 'agent_pay_vip'">
          <el-row type="flex" >
            <el-col :span="12">
              <el-form-item label="活动名称：">{{ form.name }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="起始时间：">{{ condition.start_time | formatTimeDate }}</el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" >
            <el-col :span="12">
              <el-form-item label="结束时间：">{{ condition.end_time | formatTimeDate }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- <el-form-item label="过期时间：">{{ condition.expire_time }}</el-form-item> -->
              <el-form-item></el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" >
            <el-col :span="12">
              <el-form-item label="购买价格：">{{ condition.vip1 }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item ></el-form-item>
            </el-col>
          </el-row>
        </template>

        <template v-else-if="form.key == 'consumer_distribution'">
          <el-row type="flex" >
            <el-col :span="12">
              <el-form-item label="活动名称：">{{ form.name }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="起始时间：">{{ condition.start_time | formatTimeDate }}</el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" >
            <el-col :span="12">
              <el-form-item label="结束时间：">{{ condition.end_time | formatTimeDate }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="兑换比例：">{{ condition.money_ratio }}</el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" >
            <el-col :span="12">
              <el-form-item label="铜牌VIP最小积分：">{{ condition.vip1.min }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="铜牌VIP最大积分：">{{ condition.vip1.max }}</el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" >
            <el-col :span="12">
              <el-form-item label="铜牌VIP最小兑换积分：">{{ condition.vip1.min_exchange }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="铜牌VIP最大兑换积分：">{{ condition.vip1.max_exchange }}</el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" >
            <el-col :span="12">
              <el-form-item label="铜牌VIP兑换比例：">{{ condition.vip1.ratio }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银牌VIP最小积分：">{{ condition.vip2.min }}</el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" >
            <el-col :span="12">
              <el-form-item label="银牌VIP最大积分：">{{ condition.vip2.max }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银牌VIP最小兑换积分：">{{ condition.vip2.min_exchange }}</el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" >
            <el-col :span="12">
              <el-form-item label="银牌VIP最大兑换积分：">{{ condition.vip2.max_exchange }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银牌VIP兑换比例：">{{ condition.vip2.ratio }}</el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" >
            <el-col :span="12">
              <el-form-item label="金牌VIP最小积分：">{{ condition.vip3.min }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="金牌VIP最大积分：">{{ condition.vip3.max }}</el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" >
            <el-col :span="12">
              <el-form-item label="金牌VIP最小兑换积分：">{{ condition.vip3.min_exchange }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="金牌VIP最大兑换积分：">{{ condition.vip3.max_exchange }}</el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" >
            <el-col :span="12">
              <el-form-item label="金牌VIP兑换比例：">{{ condition.vip3.ratio }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="钻石VIP最小积分：">{{ condition.vip4.min }}</el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" >
            <el-col :span="12">
              <el-form-item label="钻石VIP最大积分：">{{ condition.vip4.max }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="钻石VIP最小兑换积分：">{{ condition.vip4.min_exchange }}</el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" >
            <el-col :span="12">
              <el-form-item label="钻石VIP最大兑换积分：">{{ condition.vip4.max_exchange }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="钻石VIP兑换比例：">{{ condition.vip4.ratio }}</el-form-item>
            </el-col>
          </el-row>
        </template>

        <template v-else-if="form.key == 'agent_distribution'">
          <el-row type="flex" >
            <el-col :span="12">
              <el-form-item label="活动名称：">{{ form.name }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="起始时间：">{{ condition.start_time | formatTimeDate }}</el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" >
            <el-col :span="12">
              <el-form-item label="结束时间：">{{ condition.end_time | formatTimeDate }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发明专利推荐金额：">{{ condition.f }}</el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" >
            <el-col :span="12">
              <el-form-item label="实用新型推荐金额：">{{ condition.s }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item ></el-form-item>
            </el-col>
          </el-row>
        </template>

        <template v-else>
          <el-row type="flex" >
            <el-col :span="12">
              <el-form-item label="活动名称：">{{ form.name }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="定稿时间：">{{ condition.finals_created_at }}</el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" >
            <el-col :span="12">
              <el-form-item label="活动开始时间：">{{ condition.start_time }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="活动结束时间：">{{ condition.end_time }}</el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" >
            <el-col :span="12">
              <el-form-item label="奖励金额：">{{ form.reward }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="活动状态：">{{ form.status | activityStatus }}</el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" >
            <el-col :span="12">
              <el-form-item label="创建时间：">{{ form.created_at }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="更新时间：">{{ form.updated_at }}</el-form-item>
            </el-col>
          </el-row>
        </template>
      </el-form>
    </el-dialog>

    <editActivityDialog ref='editActivityDialog' @getData='getActivityList'></editActivityDialog>
    <!-- 用户修改vip -->
    <consumerPayVip ref='consumerPayVip' @getData='getActivityList'></consumerPayVip>
    <!-- 代理人修改vip -->
    <agentPayVip ref='agentPayVip' @getData='getActivityList'></agentPayVip>
    <!-- 修改用户积分活动 -->
    <consumerDistribution ref='consumerDistribution' @getData='getActivityList'></consumerDistribution>
    <!-- 修改用户推荐活动 -->
    <agentDistribution ref='agentDistribution' @getData='getActivityList'></agentDistribution>
  </div>
</template>

<script>
import editActivityDialog from './editActivityDialog'
import consumerPayVip from './consumer_pay_vip-edit.vue'
import agentPayVip from './agent_pay_vip-edit'
import consumerDistribution from './consumer_distribution-edit'
import agentDistribution from './agent_distribution-edit'
export default {
  components: {
    editActivityDialog,
    consumerPayVip,
    agentPayVip,
    consumerDistribution,
    agentDistribution,
  },
  data () {
    return {
      form: {
      },
      isShow: false,
      condition: {
      }
    }
  },
  methods: {
    show(data) {
      this.$nextTick (() => {
        // console.log(data)
        // this.condition = JSON.parse(data.condition)
        // console.log(this.condition)
        this.condition = data.condition
        this.form = data
      })
      this.isShow = true
    },
    close() {
      this.isShow = false
    },
    // 修改活动
    editAction (data) {
      if (data.key == 'consumer_pay_vip') {
        this.$refs['consumerPayVip'].show(data)
      } else if (data.key == 'agent_pay_vip') {
        this.$refs['agentPayVip'].show(data)
      } else if (data.key == 'consumer_distribution') {
        this.$refs['consumerDistribution'].show(data)
      } else if (data.key == 'agent_distribution') {
        this.$refs['agentDistribution'].show(data)
      }else {
        this.$refs.editActivityDialog.show(data)
      }
    },
    review (data) {
      let params = {
        pass: ''
      }
      this.$confirm('是否通过该活动！', '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '通过',
        cancelButtonText: '驳回',
        center: true,
        type: 'warning'
      }).then(() => {
        params.pass = 'yes'
        this.reviewPut(data.id, params, true)
      }).catch(action  => {
        if (action === 'cancel') {
          params.pass = 'no'
          this.reviewPut(data.id, params, false)
        }
      })

    },
    reviewPut (id,params, pYesOrNo) {
      this.$axios.put(`api/activity/${id}/audit_operation`, params).then( res => {
        if(res.data.code == 200) {
          let message = ''
          if (pYesOrNo) {
            message = '该活动已通过！'
          } else {
            message = '该活动已驳回！'
          }
          this.$message({
            type: 'success',
            message: message
          })
          this.getActivityList()
        } else if (res.data.code == 400) {
          this.$message.error(res.data.message)
        }
      })
    },
    getActivityList() {
      this.$emit('getData')
      setTimeout(() => {
        this.isShow = false
      }, 500)
    }
  }
}
</script>

<style lang='less' type='text/css'>
  .lookDetails {

    .lookDetails-dialog {
      .el-dialog {
        width: 80%;
        min-width: 800px;
      }


      .el-form-item {
        height: 100%;
        border: 1px solid #ccc;
        margin-right: -1px;
        margin-bottom: -1px;
        border-bottom-width: 0;
      }
      .el-col {
        .el-col-12 {
          .el-form-item {
            border-bottom-width: 0;
          }
        }
      }
      .el-row:last-child {
        .el-form-item {
          border-bottom-width: 1px;
        }
      }
    }

  }

</style>
